/*----------------------------------------*\
  CARD
\*----------------------------------------*/

.card {
  @apply flex flex-col h-full;
  @apply bg-white;
  container-type: inline-size;
}

.card--default {
  @apply shadow-lg;
}

.card--clickable {
  @apply relative;
  @apply transition-shadow duration-300 ease-in-out;
  @apply cursor-pointer;

  a::after,
  .btn::after {
    content: '';
    @apply absolute top-0 right-0 left-0 bottom-0;
    @apply border-2 border-text-50 border-opacity-0 transition-all duration-300 ease-in-out;
  }

  &:hover,
  &:focus-within {
    @apply shadow-2xl;

    .card__title {
      @apply text-primary-700;
    }

    a::after,
    .btn::after {
      content: '';
      @apply border-opacity-90;
    }
  }
}

.card--highlight {
  @apply relative bg-transparent;
  @apply pl-5 pt-5;
  @apply lg:pl-7 lg:pt-7;
  @apply transition-transform duration-300;

  &::before {
    content: '';
    @apply absolute top-0 right-5 left-0 bottom-5 z-0;
    @apply lg:right-7 lg:bottom-7;
    @apply bg-secondary-300;

    @apply transition-transform duration-300;
  }

  &:hover,
  &:focus-within {
    @apply bg-transparent;
    @apply shadow-none;

    a::after,
    .btn::after {
      @apply border-opacity-0;
    }

    &::before {
      @apply scale-102;
    }
  }

  .card__content {
    @apply gap-5;
  }

  .card__body {
    @apply pt-8 pb-0;
  }
}

.card--twitter {
  @apply shadow-lg;

  .card__body {
    @apply p-3;
    @apply max-h-[700px] overflow-y-scroll;
  }

  .card__footer {
    @apply pt-6;
  }
}

.card--flat.card--clickable {
  &:hover,
  &:focus-within {
    @apply bg-transparent;
    @apply shadow-none;
  }

  a::after,
  btn::after {
    @apply border-opacity-0;
  }
}

.card--flat {
  @apply py-4 lg:py-6 2xl:py-8;
  @apply bg-transparent;
  @apply border-b border-secondary-200;
}

/* card--flat is extended for .search-result items */
.card--flat .card__content {
  @apply bg-transparent;
}

/* therefore, specific definitions for card--flat children are not nested:  */
.card--flat .card__body {
  @apply px-0;
  max-height: none;
}

.card--flat .card__content:first-of-type .card__body {
  @apply py-0;
}

.card--flat .card__footer {
  @apply p-0;
}

.accordion .accordion__drawer .card--flat {
  @apply mt-0;

  &:last-of-type {
    @apply mb-4;
    @apply border-b-0;
  }
}

.card__image {
  @apply relative pb-[56.25%]; /* 16/9 ratio */
  @apply overflow-hidden;

  .grid--responsive-cols-2 & {
    @apply relative pb-[50%]; /* 2/1 ratio */
  }

  &:before {
    content: '';
    @apply absolute z-0;
    @apply inset-0;
    @apply bg-secondary-50 border-2 border-white;
    @apply opacity-70;
  }

  img {
    @apply absolute w-full h-full object-cover;
  }

  svg {
    @apply absolute z-10;
    @apply top-1/2 left-1/2;
    @apply -translate-x-1/2 -translate-y-1/2;
    @apply w-1/2 h-1/2;
  }
}

.card__header {
  @apply flex items-center;
  @apply p-6;
  @apply bg-secondary-100;
}

.card__content {
  @apply flex flex-col justify-between;
  @apply h-full;
  @apply z-10;
  @apply bg-white;
}

.card__body {
  @apply px-6 py-10;
  @apply space-y-4;
}

.card__title {
  @apply break-words;
  @apply text-lg xl:text-xl 3xl:text-2xl;
  @apply font-bold leading-snug;
  @apply transition-colors duration-200 ease-in-out;
}

.card__description {
  @apply break-words;
}

.card__body p {
  @apply line-clamp-6;
}

@container (min-width: 500px) {
  .card__body p {
    @apply line-clamp-4;
  }
}

.card__content-icons {
  @apply relative flex;
  @apply -ml-1;

  svg {
    @apply mr-2;
  }
}

.card__footer {
  @apply flex items-center justify-between;
  @apply px-6 pb-6;
}

.card__footer--icon-only {
  @apply justify-end;
}

.card__footer__info {
  @apply text-secondary-500 text--sm;
  @apply pr-6;
}

.card__footer__action {
}

.card--twitter iframe {
  @apply relative !important; /* override default twitter inline-style */
  @apply z-50;
}

.card--image-left {
  @screen md {
    @apply grid grid--responsive-cols-2/3-1/3 gap--responsive;

    .card__body,
    .card__footer {
      @apply pl-0;
    }
  }

  .card__content {
    @apply md:-ml-3 lg:-ml-5 xl:-ml-6 3xl:-ml-8;
  }

  .card__title {
    @apply md:text-xl xl:text-2xl 3xl:text-3xl;
  }
}

.card--image-right {
  @screen md {
    @apply grid grid--responsive-cols-1/3-2/3 gap--responsive grid--reverse;

    .card__content {
      grid-area: A;
    }

    .card__image {
      grid-area: B;
    }

    .card__body,
    .card__footer {
      @apply pr-0;
    }
  }
}

.card--image-left,
.card--image-right {
  &.card--flat {
    @screen md {
      @apply border-none;

      .card__body {
        @apply pt-0;
      }
    }
  }
}

.card--universal {
  @apply shadow-lg;

  .card__image {
    @apply border-t-[0.5em] border-b-[0.5em] border-transparent;

    &:before {
      @apply border-0;
    }

    img {
      @apply object-contain;
    }
  }
}

.card--list {
  @apply card--flat;

  &,
  &:hover {
    @apply no-underline text-inherit; /* override general styling for links in main */
  }

  @media screen(sm) {
    @apply grid gap-x-6;
    grid-template-columns: 4fr 1fr;
  }

  .card__image {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: initial;
    @apply hidden md:block h-0;
    @apply pb-[80%]; /* visually reduce height of potential vertical images */

    @apply border-t-[0.5em] border-b-[0.5em] border-transparent;

    &:before {
      @apply border-0 bg-transparent;
    }

    img {
      @apply object-contain object-right-top;
    }
  }

  .card__content {
    grid-column: 1 / 2;
    grid-row: 1;
    align-self: start;
  }

  .card__body {
    @apply pt-0 pb-4;
  }

  .card__footer__action {
    @apply -mt-8;
  }

  .btn {
    @apply h-0 min-h-0 border-0;

    &:focus-visible {
      @apply ring-0 ring-transparent;
    }

    &:focus-visible::after {
      @apply ring-2 ring-purple-500;
    }
  }
}

.card--list-without-image {
  @apply card--flat;

  &,
  &:hover {
    @apply no-underline text-inherit; /* override general styling for links in main */
  }

  .card__content {
    @apply flex;
  }

  .card__body {
    @apply pt-0 pb-4;
  }

  .card__footer__action {
    @apply -mt-8;
  }

  .btn {
    @apply h-0 min-h-0 border-0;

    &:focus-visible {
      @apply ring-0 ring-transparent;
    }

    &:focus-visible::after {
      @apply ring-2 ring-purple-500;
    }
  }
}
